﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>ImageUpload</title>
</head>
<body>
    <a href="/home/SampleEditor">富文本样例</a> | <a href="/home/ImageUpload">多图片上传</a>
    <input type="button" id="btnopen" value="click" onclick="LoadUploadControl()" />
    <div id="container">
    </div>
    <!--模态弹出框-->
    <div id="fileuploadframe" style="display: none; width: 550px; height: 481px;">
        <div style="height: 25px; width: 100%; border-bottom: 1px solid #ccc">
            <div style="float: right; width: 80px; height: 23px; line-height: 23px;">
                <a href="javascript:;">
                    <img alt="关闭" style="border: none;" id="btnflfclose" src="/content/img/closelabel.gif" /></a>
            </div>
        </div>
        <div style="width: 100%; height: 455px;">
            <div id="fileuploadframe_imgbox" style="width: 100%; height: 410px; overflow: auto;">
            </div>
            <div id="fileuploadframe_controlbox" style="width: 100%; height: 45px;">
                <div id="fileupload" style="float: left; width: 130px;">
                </div>
                <div id="fileuploadframe_hint" style="font-size: 12px; padding-top: 20px; float: left;
                    width: 320px;">
                </div>
                <div id="fileuploadframe_btnsubmit" style="float: right;">
                    <input id="btnupload" type="button" value="完成" /></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/plug.js"></script>
    <script type="text/javascript" src="/scripts/swfupload/swfupload.js"></script>
    <script type="text/javascript" src="/scripts/swfupload/jquery.swfupload.js"></script>
    <script type="text/javascript">
        //多图片上传
        var swf = new plug.SwfUpload();
        function LoadUploadControl() {
            new plug.PopFrame().OpenFrame('fileuploadframe', 'btnflfclose', function () {
                swf.Bind('fileupload', {
                    upload_url: "/home/SWFPrepareUpload",
                    file_types: "*.jpg;*.png",
                    file_types_description: "jpg或png格式",
                    commitbtn: 'btnupload',
                    commiturl: '/home/SWFUpload',
                    commitdata: '',
                    onDialogStart: function () {
                        $('#fileuploadframe_imgbox').children('#uploadframe_nophotobox').remove();
                    },
                    onLoad: function () {
                        $('#fileuploadframe_imgbox').append(
                            $('<div id="uploadframe_nophotobox" style="width:130px; padding-top:120px;margin-left:auto; margin-right:auto;"/>').append(
                                $('<img src="/scripts/swfupload/no_photo.png" alt="noPhoto" />')
                            )
                        );
                        $('#fileuploadframe_hint').text('请选择不大于5MB的 PNG，JPG图片。');
                    },
                    onAppend: function (event, file) {
                        $('#fileuploadframe_imgbox').append(
                            $('<div id="' + file.name.replace('.', '_') + '" style="margin-right:8px;margin-top:5px;float:left;width:113px;height:113px;padding:5px;border:1px solid #ccc;"></div>')
                                .append($('<div style="width:20px;margin-left:auto;margin-right:auto;padding-top:50px;"><img alt="loading" src="/scripts/swfupload/frameload.gif" /></div>'))
                        );
                    },
                    onError: function (event, file, errorCode, message) {
                        if (errorCode == -110) {
                            alert('文件：' + file.name + '过大，请选择不超过7MB的文件');
                        }
                        else {
                            alert('文件：' + file.name + '上传失败，请稍后再试');
                            var id = file.name.replace('.', '_');
                            if ($('#' + id)) {
                                $('#' + id).remove();
                            }
                        }
                    },
                    onSuccess: function (event, file, serverData) {
                        var data = eval('(' + serverData + ')');
                        var id = file.name.replace('.', '_');
                        if ($('#' + id)) {
                            $('#' + id).attr('id', data.name.replace('.', '_'))
                                .html('<div><img style="width:115px;height:95px;" alt="' + data.name.replace('.', '_') + '" src="' + data.path + '" /></div>' +
                                '<div style="padding-top:2px;float:right;cursor:pointer;" onclick="javascript:swf.DeleteItem(this);"><img alt="删除" style="width:16px;height:16px;" src="/scripts/swfupload/Trash_Delete.png" /></div>');
                            swf.PutImage({ name: data.name, path: data.path, horizontal: data.horizontal.toString() });
                        }
                    },
                    commitComplete: function (files) {
                        $('#btnflfclose').trigger('click');
                        var width = 95, height = 115;
                        for (var i = 0, len = files.length; i < len; i++) {
                            if (/^true$/i.test(files[i].horizontal.toString())) {
                                width = 115;
                                height = 95;
                            }
                            $('#container').append(
                                $('<img alt="' + files[i].name + '" src="' + files[i].path + '" style="width:' + width + 'px;height:' + height + 'px;"/>'));
                        }
                    }
                });
            }, function () {
                $('#fileuploadframe_imgbox').html('');
                $('#fileupload').html('');
                swf.uninstall();
            });
        }
    </script>
</body>
</html>
